<template>
  <div class="contentsecond">
    <div style="height: 8%;width: 100%;background:url(../../static/bg_top.png);background-size: 100% 100%;">
      <div style="font-size: 34px;color: #FFFFFF;padding-top: 16px;width: 100%;text-align: center;">景点假日统计大数据屏</div>

    </div>
      <el-select v-model="value"  style="position: absolute;right: 11%;top: 20px;width: 80px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value1"  style="position: absolute;right: 6%;top: 20px;width: 90px;" @change="typeChange()">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value2"  style="position: absolute;right: 1%;top: 20px;width: 90px;">
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    <div style="height: 91%;width: 100%;margin-top: 4px;display: flex;flex-direction: column;">
      <div style="height: 20%;width: 100%;position: relative;">
        <dv-border-box-10 :color="['#0197c8', '#ffffff']"></dv-border-box-10>
        <div
          style="width: 100%;height: 100%;position: absolute;top: 0;display: flex;justify-content: center;align-items: center;">
          <div style="width: 27%;height: 75%;background-color: #034c6a55;display: flex;">
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_1.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆总数(辆)</div>
                <div style="font-size: 28px;color: #ffff43;font-weight: bold;">12356</div>
              </div>
            </div>
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_2.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆使用数(辆)</div>
                <div style="font-size: 28px;color: #ffff43;font-weight: bold;">12356</div>
              </div>
            </div>
          </div>
          <div style="width: 27%;height: 75%;background-color: #034c6a55;display: flex;margin-left: 4%;">
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_4.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆总数(辆)</div>
                <div style="font-size: 28px;color: #25f3e6;font-weight: bold;">12356</div>
              </div>
            </div>
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_5.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆使用数(辆)</div>
                <div style="font-size: 28px;color: #25f3e6;font-weight: bold;">12356</div>
              </div>
            </div>
          </div>
          <div style="width: 27%;height: 75%;background-color: #034c6a55;display: flex;margin-left: 4%;">
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_6.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆总数(辆)</div>
                <div style="font-size: 28px;color: #ff4e4e;font-weight: bold;">12356</div>
              </div>
            </div>
            <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
              <img src="../../static/info_7.png" style="width: 40px;height: 40px;" />
              <div style="display: flex;flex-direction: column;margin-left: 25px;">
                <div style="font-size: 18px;color: #FFFFFF;">车辆使用数(辆)</div>
                <div style="font-size: 28px;color: #ff4e4e;font-weight: bold;">12356</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 80%;width: 100%;display: flex;">
        <div style="width: 30%;height: 100%;display: flex;flex-direction: column;">
          <div style="height: 50%;width: 100%;position: relative;">
            <dv-border-box-11 :color="['#0197c8', '#0197c8']" title="车辆类型统计"></dv-border-box-11>
            <div style="width: 90%;height: 80%;position: absolute;top: 15%;left: 5%;" id="secondChart1"></div>
          </div>
          <div style="height: 50%;width: 100%;position: relative;">
            <dv-border-box-11 :color="['#0197c8', '#0197c8']" title="车辆状态统计"></dv-border-box-11>
            <div style="width: 90%;height: 80%;position: absolute;top: 15%;left: 5%;" id="secondChart2"></div>
          </div>
        </div>
        <div style="width: 40%;height: 100%;position: relative;">
          <dv-border-box-11 :color="['#0197c8', '#0197c8']" title="车辆状态统计"></dv-border-box-11>
          <div style="width: 90%;height: 88%;position: absolute;top:6% ;left: 5%;">
            <el-amap vid="amapDemo" style='margin-top: 20px;' :mapStyle="mapStyle" :zoom="zoom" :center="center"
              class="amap-demo">
              <el-amap-marker v-for="marker in markers" :content="marker.content" :position="marker.position"
                :key="marker.id" :icon='marker.icon' :events="marker.events"></el-amap-marker>
              <!-- <el-amap-marker v-for="marker in markers" content='123'  :position="marker.position" :key="marker.id"  :events="marker.events"></el-amap-marker> -->
              <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible"
                :content="window.content" :offset="window.offset" :close-when-click-map="true" :is-custom="true">
                <div id="info-window">
                  <div>地址：{{ window.address }}</div>
                  <div>名称：{{ window.name }}</div>
                  <div>编号：{{ window.no }}</div>
                  <!-- <div class="detail" @click="checkDetail">查看详情</div> -->
                </div>
              </el-amap-info-window>
            </el-amap>
          </div>
        </div>
        <div style="width: 30%;height: 100%;display: flex;flex-direction: column;">
          <div style="height: 50%;width: 100%;position: relative;">
            <dv-border-box-11 :color="['#0197c8', '#0197c8']" title="各个时间段游客人数"></dv-border-box-11>
            <div style="width: 90%;height: 80%;position: absolute;top: 15%;left: 5%;" id="secondChart3"></div>
          </div>
          <div style="height: 50%;width: 100%;position: relative;">
            <dv-border-box-11 :color="['#0197c8', '#0197c8']" title="近三天游览人数"></dv-border-box-11>
            <div style="width: 90%;height: 80%;position: absolute;top: 15%;left: 5%;" id="secondChart4" @click="toBigThree()"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '1',
          label: '2021'
        }, {
          value: '2',
          label: '2020'
        }],
        options1: [{
          value: '1',
          label: '春节'
        }, {
          value: '2',
          label: '清明节'
        }, {
          value: '3',
          label: '劳动节'
        }, {
          value: '4',
          label: '端午节'
        }, {
          value: '5',
          label: '中秋节'
        }, {
          value: '6',
          label: '国庆节'
        }, {
          value: '7',
          label: '元旦'
        }],
        options2:[{
          value: '1',
          label: '第一天'
        },{
          value: '2',
          label: '第二天'
        },{
          value: '3',
          label: '第三天'
        }],
        value: '1',
        value1: '1',
        value2: '1',
        secondChart1: '',
        secondChart1: '',
        secondChart3: '',
        secondChart4: '',
        latAndLng: '',
        range: '',
        mapStyle: "amap://styles/78428f12ed97c2ec428b64881ff4e739", //设置地图样式
        circles: [],
        data: [{
            position: '121.599197, 31.205379',
            address: '湖南郴州',
            name: '东江湖',
            no: 1,
          },

          {
            position: '121.564254, 31.21135',
            address: '湖南长沙',
            name: '岳麓山',
            no: 2,
          },
          {
            position: '113.04197,28.168544',
            address: '湖南长沙',
            name: '橘子洲',
            no: 3,
          }, {
            position: '111.684337,27.687326',
            address: '娄底新化',
            name: '梅山龙宫',
            no: 4,
          }
        ],

        zoom: 7,
        center: [112.097451, 28.168544],
        markers: [{
          position: [112.097451, 28.168544],
          icon: 'http://www.hnlxyj.com/img/dingwei%201.png',
          content: "<div><img src='http://www.hnlxyj.com/img/dingwei%201.png'/></div>",
          events: {
            mouseover() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              this.window = this.windows[index]
              this.$nextTick(() => {
                this.window.visible = true
              })
            },
            mouseout() {
              this.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
            }
          }
        }],
        windows: [],
        window: '',
        events: {
          click(e) {
            const {
              lng,
              lat
            } = e.lnglat
            self.lng = lng
            self.lat = lat
          }
        },
        lng: 0,
        lat: 0
      }
    },
    methods: {
      point() {
        const markers = []
        const windows = []
        const that = this
        this.data.forEach((item, index) => {
          markers.push({
            position: item.position.split(','),
            icon: 'http://www.hnlxyj.com/img/dingwei%201.png',
            content: "<div><img src='http://www.hnlxyj.com/img/dingwei%201.png'/> </div>",
            // icon:item.url, //不设置默认蓝色水滴
            events: {
              mouseover(e) {
                console.log(e)
                // 方法：鼠标移动到点标记上，显示相应窗体

                that.window = that.windows[index]
                that.$nextTick(() => {
                  that.window.visible = true
                })
              },
              mouseout() {
                that.windows.forEach(window => {
                  window.visible = false // 关闭窗体
                })
              }
            }
          })

          windows.push({
            position: item.position.split(','),
            isCustom: true,
            offset: [115, 55], // 窗体偏移
            showShadow: false,
            visible: false, // 初始是否显示
            address: item.address,
            name: item.name,
            no: item.no
          })
        })
        //  加点
        this.markers = markers

        // 加弹窗
        this.windows = windows
      },
      drawCircle() {
        var color = ['#AfEbAe', '#2F8DF4', '#c480f8']
        var option = {
          color: color,
          backgroundColor: '#00000000',
          title: {
            text: '车辆类型统计',
            left: 'center',
            top: '50%',
            textStyle: {
              fontSize: 15,
              color: '#fff',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 20,
            top: 20,
            textStyle: {
              fontSize: 15,
              color: '#fff',
              fontWeight: 'normal'
            }
          },
          series: [{
            type: 'pie',
            roseType: 'radius',
            radius: ['30%', '60%'],
            data: [{
                value: 220,
                name: '客运车'
              }, {
                value: 120,
                name: '危险品车'
              },
              {
                value: 189,
                name: '网约车'
              }
            ],
            label: {
              normal: {
                formatter: '{font|{b}}\n{hr|}\n{font|{d}%}',
                rich: {
                  font: {
                    fontSize: 14,
                    padding: [5, 0],
                    color: '#fff'
                  },
                  hr: {
                    height: 0,
                    borderWidth: 1,
                    width: '100%',
                    borderColor: '#fff'
                  }
                }
              },
            },
            labelLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            }
          }]
        }
        this.secondChart1 = this.$echarts.init(document.getElementById('secondChart1'))

        // 绘制图表
        this.secondChart1.setOption(option);
      },
      drawSuperposition() {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            textStyle: {
              fontSize: 12, //字体大小
              color: '#ffffff' //字体颜色
            },
            data: ['行驶中', '已停车', '已使离']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            max: 1000,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff',
              fontSize: 14
            },
            axisLine: {

              lineStyle: {
                color: '#ffffff'
              }
            },
            data: ['福建', '广州', '厦门', '南宁', '背景', '长沙', '重庆']
          },

          series: [{
              name: '行驶中',
              type: 'bar',
              stack: '总量',
              barWidth: 15,
              itemStyle: {
                normal: {
                  color: '#AfEbAe',
                  barBorderRadius: [20, 20, 20, 20],
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              z: 10,
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '已停车',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  color: '#2F8DF4',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#2F8DF4',
                  barBorderRadius: [20, 20, 20, 20],
                  shadowOffsetX: -20,
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              z: 5,
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '已使离',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  barBorderRadius: [20, 20, 20, 20],
                  color: '#c480f8',
                  shadowBlur: [0, 0, 0, 10],
                  shadowColor: '#c480f8',
                  shadowOffsetX: -20,
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            }

          ],

        }
        this.secondChart2 = this.$echarts.init(document.getElementById('secondChart2'))
        this.secondChart2.setOption(option);
      },
      drawLine() {
        var option = {
          backgroundColor: '#00000000',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0296c7'
              },
            },
            splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                color: '#f00'
              },
            },
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: ['8：00', '9:00', '10:00', '11:00', '12:00', '13:00'],

          }],

          yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0296c7'
              },
            },
            axisLabel: {
              show: true,

              textStyle: {
                color: '#d1e6eb',

              },
            },
            axisTick: {
              show: true,
            },
          }],
          series: [{
              name: '各景区游览人数',
              type: 'line',
              // smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                normal: {
                  color: "#0296c7",
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#0296c7',
                }
              },
              itemStyle: {
                color: "#0296c733",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              tooltip: {
                show: true
              },
              areaStyle: {
                normal: {

                  shadowColor: '#0296c733',
                  shadowBlur: 20
                }
              },
              data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
            },

          ]

        }
        this.secondChart3 = this.$echarts.init(document.getElementById('secondChart3'))
        this.secondChart3.setOption(option);
      },
      drawCumln() {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: 'bottom',
            textStyle: {
              fontSize: 12, //字体大小
              color: '#ffffff' //字体颜色
            },
            data: ['60岁以上', '20-60岁', '20岁以上']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'value',

            splitLine: {
              show: true,
              lineStyle: {
                color: '#D2E6F9',
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#D2E6F9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
            data: ['今天', '昨天', '前天'],
            axisLine: {
              lineStyle: {
                color: '#D2E6F9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          series: [{
              name: '60岁以上',
              type: 'bar',
              barWidth: 24,
              barGap: '40%',
              data: [18, 23, 29],
              itemStyle: {
                barBorderRadius: [4, 24, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#8BDCFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#4594E8' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: '20-60岁',
              type: 'bar',
              barWidth: 24,
              barGap: '40%',
              data: [23, 28, 36],
              itemStyle: {
                barBorderRadius: [4, 24, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#FFB2B2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#F45353' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            {
              name: '20岁以上',
              type: 'bar',
              barWidth: 24,
              barGap: '40%',
              data: [26, 32, 20],
              itemStyle: {
                barBorderRadius: [4, 24, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#59FFB7' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#37BDFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          ]
        }
        this.secondChart4 = this.$echarts.init(document.getElementById('secondChart4'))
        this.secondChart4.setOption(option);
      },
      toBigThree(){
        this.$router.push({
          name: 'bigThree',
         });
      },
      typeChange(){
        this.options2=[]
        if(this.value1=='1'||this.value1=='2'||this.value1=='4'||this.value1=='5'||this.value1=='7'){
          this.options2.push({value:1,label:'第一天'})
          this.options2.push({value:2,label:'第二天'})
          this.options2.push({value:3,label:'第三天'})
        }else if(this.value1=='3'){
          this.options2.push({value:1,label:'第一天'})
          this.options2.push({value:2,label:'第二天'})
          this.options2.push({value:3,label:'第三天'})
          this.options2.push({value:4,label:'第四天'})
          this.options2.push({value:5,label:'第五天'})
        }else if(this.value1=='6'){
          this.options2.push({value:1,label:'第一天'})
          this.options2.push({value:2,label:'第二天'})
          this.options2.push({value:3,label:'第三天'})
          this.options2.push({value:4,label:'第四天'})
          this.options2.push({value:5,label:'第五天'})
          this.options2.push({value:6,label:'第六天'})
          this.options2.push({value:7,label:'第七天'})
        }
      }
    },
    created() {
      this.point()
    },
    mounted() {
      this.drawCircle()
      this.drawSuperposition()
      this.drawLine()
      this.drawCumln()
    }
  }
</script>


<style>
  html {
    width: 100%;
    height: 100%;
  }

  #info-window {
    display: flex;
    flex-direction: column;
    width: 120px;
    height: 100px;
    margin-left: 10px;
    background: #37BDFF;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  #info-window div {
    color: #fff;
    flex: 1;
  }

  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .el-input__inner{
    background-color: #061436 !important;
    border: 1px #061436 solid;
  }
  .el-select-dropdown{
    background-color: #061436 !important;
  }
  .el-select-dropdown_item hover{
    background-color: #061436 !important;

  }

  .contentsecond {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background: url(../../static/data08.png);
  }
</style>
